node.js - express #8

node.js express.js

pyk 2017-07-21 00:28:53 ‧ 18916 瀏覽

分享至

接續上篇的基本設定第七個應用：開發旅行社網站(1)

第七個應用：開發旅行社網站(2)

接續上次建立完簡單的路由和伺服器，我們要繼續往後做了

Express 常用的view engine是 Jade ，但Jade將HTML標籤完全抽像化，較不容易理解
因此這本書改用 Handlebars

在資料夾內安裝 Handlebars

npm install --save express3-handlebars

雖然上面寫express3但express4也能使用

修改 meadowloark.js 設定 handlebars為view engine

var app = express();

//將handlebars作為默認的view engine
var handlebars = require('express3-handlebars')
.create({ defaultLayout:'main' });
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');

建立資料夾 views 並在底下新增 layouts 資料夾存放模板
新增 main.handlebars 在layouts的資料夾，作為主模板

<!doctype html>
<html>
<head>
    <title>Meadowlark Travel</title> 
</head>
<body>
    {{{body}}}
</body>
</html>

在 views 的資料夾底下，新建

home.handlebars

<h1>Welcome to Meadowlark</h1>

about.handlebars

<h1>About Meadowlark Travel</h1>

404.handlebars

<h1>404 - Not Found</h1>

500.handlebars

<h1> 500 - Server Error</h1>

這樣就把view給設定好了
6. 修改路由規則，在meadowlark.js下修改規則

//Home
app.get('/', function(req, res){
	res.render('home');
});

//About
app.get('/about', function(req, res){
	res.render('about');
});

//404
app.use(function(req, res){
	res.status(404);
	res.render('404');
});

//500
app.use(function(err, req, res, next){
	console.error(error.stack);
	res.status(500);
	res.render('500');
});

修正完後重新開啟 http://localhost:3000/ 應該會看到套用main layout後的效果